<%--
  Created by IntelliJ IDEA.
  User: 王炼
  Date: 2021/4/30
  Time: 18:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- jquery page -->
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body onload="loadData(0)">
<div class="modal fade" id="one" style="top:200px">
    <input hidden="hidden" value="${userName}" id = "firstName"/>
    <div class="modal-dialog">
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header" style="background-color: green; height: 20px;">
            </div>
            <div class="modal-body">
                <table class="table" border="0">
                    <tr>
                        <%--                        四列--%>
                        <th>
                            商品Id
                        </th>
                        <th>
                            商品名字
                        </th>
                    </tr>
                    <tr><td><input type="text" id="gId" readonly="true"></td>
                        <td>
                            <input type="text" id="gName" >
                        </td>
                    </tr>
                    <tr>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    <tr>
                        <td>
                            <%--                            value="${userName}"--%>
                            <input  type="text"  id="gPrice" readonly="true" >
                        </td>
                        <td>

                            <input type="text" id="gNumber" placeholder="" >
                        </td>
                    </tr>
                    <tr>
                        <td><span style="color:red" id="info"></span></td>
                        <td colspan="2">
                            <button type="button" onclick="buy1()" class="btn btn-success btn-sm">确定购买</button>
                            <a href="${pageContext.request.contextPath}/goods/showGoods" type="button" class="btn btn-success btn-sm">返回</a>
                        </td>

                    </tr>
                </table>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $(".searchButton").bind("click", function() {
            location.href = "/tmall/searchResults?keyWord=" + $("[name=searchInput]").val();
        });
    });
</script>
<div id="category">
    <style>
        div.simpleSearchDiv {
            background-color: #C40000;
            width: 300px;
            margin: 10px 20px 40px;
            padding: 1px;
            height: 40px;
            display: block;
        }
        .pull-right { float: right; }
        .pull-right {
            float: right !important;
        }
        .glyphicon-shopping-cart:before {
            content: "\e116"; }
        .redColor {
            color: #C40000;
        }
        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }
        table.categorySortBarTable span.glyphicon {
            font-size: 10px;
        }
        .glyphicon{
            position:relative;
            top:1px;
            display:inline-block;
            font-family:'Glyphicons Halflings';
            font-style:normal;
            font-weight:normal;
            line-height:1;
            -webkit-font-smoothing:antialiased}
        .glyphicon-arrow-down:before {
            content: "\e094";
        }
        table.categorySortBarTable td.priceMiddleColumn {
            width: 10px;
            vertical-align: middle;
            color: #CCCCCC;
        }
        div.categoryProducts {
            padding: 0px 20px 40px 20px;
        }
        div.productUnit span.productPrice {
            font-size: 20px;
            color: #CC0000;
            display: block;
            padding-left: 4px;
        }
        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            line-height: 1;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        table.categorySortBarTable span.glyphicon {
            font-size: 10px;
        }
        table.categorySortBarTable td.grayColumn {
            background-color: #F1EDEC;
        }
        table.categorySortTable td:hover {
            background-color: #F1EDEC;
        }
        table.categorySortBarTable {
            border-collapse: collapse;
            display: inline-table;
        }
        div.categorySortBar {
            background-color: #FAF9F9;
            margin: 40px 20px 20px 20px;
            padding: 4px;
        }
        div.productUnit {
            width: 225px;
            height: 338px;
            border: 3px solid #fff;
            background-color: white;
            margin: 12px 5px;
            float: left;
            padding: 0px;
        }
        div.productUnitFrame:hover{
            border:1px solid #C40000;
        }

        a.productLink {
            height: 34px;
        }

        div.productUnit img.productImage {
            width: 100%;
            height: 190px;
        }

        div.infoInimgAndInfo div.productPriceDiv {
            background-image: url(/img/site/priceBackground.png);
            height: 102px;
            padding: 10px;
            color: #666666;
        }

        a.productLink {
            height: 34px;
        }

        div.productUnit a.tmallLink {
            margin: 10px 0px;
            color: #999999;
            font: 0.8em;
            display: block;
            text-decoration: underline;
        }

        .show {
            border: 1px dotted skyblue !important;
        }

        div.productUnit div.productInfo {
            color: #999999;
        }

        div.productUnit span.monthDeal, div.productUnit span.productReview {
            display: inline-block;
            width: 90px;
            height: 30px;
            padding-top: 5px;
            padding-left: 5px;
        }

        div.productUnit span.productDealNumber {
            font-weight: bold;
            color: #B57C5B;
        }
        div.productUnit span.productReviewNumber {
            font-weight: bold;
            color: #3388BB;
        }

        div.productUnit span.productReviewNumber {
            font-weight: bold;
            color: #3388BB;
        }

        span.wangwangGif {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-image: url(../img/site/wangwang.gif);
            background-repeat: no-repeat;
            background-color: transparent;
            background-attachment: scroll;
            background-position: -83px -0px;
            position: relative;
            top: 8px;
            left: 2px;
        }
    </style>
    <input type="hidden" id="categoryId" th:value="${categoryId}" />
    <div class="categoryPageDiv">
        <img id="categoryImage" src="">
        <div class="categorySortBar">
            <table class="categorySortBarTable categorySortTable">
                <tr>
                    <td class="grayColumn"><a name="prodctSort" orderBy="id" href="javascript:void(0);" onclick="loadData(1)">
                        综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td class="grayColumn"><a name="prodctSort" orderBy="review_count" href="javascript:void(0);" onclick="loadData(2)">
                        人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td class="grayColumn"><a name="prodctSort" orderBy="create_date" href="javascript:void(0);" onclick="loadData(3)">
                        新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td class="grayColumn"><a name="prodctSort" orderBy="promote_price" href="javascript:void(0);" onclick="loadData(5)">
                        价格<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                </tr>
            </table>
        </div>
        <div class="categoryProducts">
        </div>
        <div>
            <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
            <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
            一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
        </div>
        <div style='clear:both'></div>
    </div>
</div>
</body>
<script>

    // 初始化页面分页变量
    var page = 1;
    var row = 7 ;
    var totalPage = 0;

    function updatePageWindow(obj) {
        //显示弹窗
        $("#one").modal("show");
        //清空提示信息
        $("#info").text("");

        alert("我要开始装逼了！")
        var gId = $(obj).parent().parent().parent().find("input").eq(0).val();
        $("#gId").val(gId);
        //id选择器
        var gName = $(obj).parent().parent().parent().find("input").eq(1).val();
        $("#gName").val(gName);
        //id选择器

        var gPrice = $(obj).parent().parent().parent().find("input").eq(2).val();
        $("#gPrice").val(gPrice);

        var gNumber = "当前最多可以选择："+$(obj).parent().parent().parent().find("input").eq(3).val()+"个";
        $("#gNumber").val(gNumber).placeholder();

    }
    function pres() {
        page--;
        if (page < 1) {
            page = 1;
        }
        loadData();
    }
    function buy1() {
        var gId = $("#gId").val();
        var gName = $("#gName").val();
        var gPrice = $("#gPrice").val();
        var gNumber = $("#gNumber").val();
        var userName = $("#firstName").val();
        alert(gId)
        $.ajax({
            url : "${pageContext.request.contextPath}/goods/buyGoodsList?userName="+userName,
            type : "get",
            data :{"page": page, "row": row,"gId":gId,"gName":gName,"gPrice":gPrice,"gNumber":gNumber},
            dataType:"json",
            success : function (data) {
                if (data.info ="购买成功"){
                    alert("购买成功！！！");
                }else {
                    alert("购买失败！！！");
                }
            },
            error : function (data) {
                layer.msg(data.responseText, {icon: 0});
            }
        });
    }
    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
            page = totalPage;
        }
        loadData();
    }
    // 排序按钮点击事件
    function productSort(sortBtn) {
        orderBy = sortBtn.attr("orderBy");
        var directionClass = sortBtn.children("span").attr("class");
        if (directionClass == "glyphicon glyphicon-arrow-down") {
            directionClass = "glyphicon glyphicon-arrow-up";
            direction = "asc";
        } else {
            directionClass = "glyphicon glyphicon-arrow-down";
            direction = "desc";
        }

        // 复原其余排序按钮
        $(".glyphicon").removeClass("glyphicon-arrow-down").removeClass("glyphicon-arrow-up")
        $(".glyphicon").addClass("glyphicon-arrow-down");
        // 切换点击按钮样式
        sortBtn.children("span").removeClass("glyphicon-arrow-down").removeClass("glyphicon-arrow-up");
        sortBtn.children("span").addClass(directionClass);

        initProducts();
    }


    // 分页显示产品集合
    function loadData(choose) {
        $.ajax({
            url : "${pageContext.request.contextPath}/goods/requestGoodsList?number="+choose,
            type : "get",
            data :{"page": page, "row": row},
            dataType:"json",
            success : function (data) {
                //取出总页数
                totalPage = data.totalPage;
                //显示总条数
                $("#total").text(data.total);
                //显示总页数
                $("#totalPage").text(totalPage);
                var products = "";
                $.each(data.list, function(i, item){
                    products += "<div class='productUnit'>";
                    products += "<input id='gId' name = 'first' readonly ='readonly' value='"+item.gId+"' hidden = 'hidden' />";
                    products += "<input id='gId' readonly ='readonly' value='"+item.gName+"' hidden = 'hidden' />";
                    products += "<input id='gPrice' readonly ='readonly' value='"+item.gPrice+"' hidden = 'hidden' />";
                    products += "<input id='saleNumber' readonly ='readonly' value='"+item.gNumber+"' hidden = 'hidden' />";

                    products += "<div class='productUnitFrame'>";
                    products += "<a href='/tmall/product/" + item.gId + "'>";
                    products += "<img class='productImage' src=\"${pageContext.request.contextPath}/images"+item.gPhotoUrl + "\""+">";
                   <%--" <img src=\"${pageContext.request.contextPath}/icon/"+data.info[i].eIcon+"\" "+" style=\"width"+":"+150+"px;height:"+100+"px\" + /></td>"--%>
                    products += "</a>";
                    products += "<a class='productLink' >商品名字： "+ item.gName + "</a>" ;
                    products += "<span class='productPrice'>¥" + item.gPrice + "</span>";
                    products += "<div class='show1 productInfo'>";
                    products += "<span class='monthDeal'>成交 <span class='productDealNumber'>" +
                        item.saleNumber + "</span>笔</span>";
                    products += "   <span class='productReview'>评价<span class='productReviewNumber'>" +
                        "待插入" + "</span>   </span>";
                    products += "<span class='wangwang'>";
                    products += "<a class='wangwanglink' href='javascript:void(0);'>";
                    products += "<img src=\"${pageContext.request.contextPath}/images/wangwang.png" + "\""+">";
                    products += "</a>";
                    products += "</span>";
                    <%--products += "   <a class='productLink' href='${pageContext.request.contextPath}/goods/detailsGoods?gId=" + 6666 + "'>" + "立即下单"+ "</a>";--%>
                    products += "   <button type='button' class='btn btn-success btn-sm' onclick='updatePageWindow(this)' >" + "立即下单"+ "</button>";
                // <button type='button' class="btn btn-success btn-sm" onclick='updatePageWindow(this)'>查看订单详情</button>
                    products += "</div>";
                    products += "</div>";
                    products += "</div>";
                });
                if (products == "") {
                    $(".categoryProducts").html("未找到该类别产品");
                } else {
                    products += "<div style='clear:both'></div>";
                    $(".categoryProducts").html(products);
                }
             },
            error : function (data) {
                layer.msg(data.responseText, {icon: 0});
            }
        });
    }
</script>
</html>